<template>
  <div class="logistics">
    <div class="title">请选择物流方式</div>

    <div class="content">
      <div class="content-item" @click="handleSelect('village')">
        <div class="left">
          <img v-if="selectedArr.village" src="@/assets/addstart/setinfo/checkbox_true.png" />
          <img v-else src="@/assets/addstart/setinfo/checkbox_false.png" />
        </div>

        <div class="right">
          <div class="right-top">小区自提</div>
          <div class="right-bottom">
            <div class="r-b-left">选择自提点:</div>

            <div class="r-b-right" @click.stop="handleRouteJump">
              <span class="text-has" v-if="selectedArr.villageIdArr.length > 0"
                >已选择{{ selectedArr.villageIdArr.length }}个自提点</span
              >
              <span class="text-hasnot" v-else>请选择自提点</span>
              <img src="@/assets/icons/arrow_right.png" />
            </div>
          </div>
        </div>
      </div>

      <div class="content-item" @click="handleSelect('delivery')">
        <div class="left">
          <img v-if="selectedArr.delivery" src="@/assets/addstart/setinfo/checkbox_true.png" />
          <img v-else src="@/assets/addstart/setinfo/checkbox_false.png" />
        </div>

        <div class="right">快递</div>
      </div>
    </div>

    <div class="bottom">
      <div class="action">
        <button class="action-btn" @click="handleSave">保存设置</button>
      </div>
      <i v-if="isIOS" class="toolman"></i>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, watch } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { judgeClient } from '@/utils/utils'
  import { Toast } from '@nutui/nutui'
  const { isIOS } = judgeClient()

  // ------ router
  const router = useRouter()
  const route = useRoute()

  // ------ data
  const selectedArr = reactive<any>({
    village: false,
    villageIdArr: [],
    delivery: false
  })

  // ------ watch
  watch(
    () => selectedArr.delivery,
    (newVal) => {
      window.localStorage.setItem('deliveryFlag', JSON.stringify(newVal))
    }
  )

  // ------ methods
  const handleSelect = (which: string) => {
    if (route.query.isCommunity && which == 'village') return // 小区团购默认选中
    selectedArr[which] = !selectedArr[which]
  }
  const handleRouteJump = () => {
    router.push('/logisticslist')
  }
  const handleSave = () => {
    if (!selectedArr.village) {
      window.localStorage.removeItem('logisticIdArr')
    } else {
      if (selectedArr.villageIdArr.length <= 0) {
        Toast.text('请选择小区自提点')

        return
      }
    }

    if (route.query.isCommunity) {
      window.localStorage.setItem(
        'setinfo-logistics-selectedArr-community',
        JSON.stringify(selectedArr)
      )
    } else {
      window.localStorage.setItem('setinfo-logistics-selectedArr', JSON.stringify(selectedArr))
    }
    router.back()
  }

  // ------ lifecycle
  function setupInit() {
    // 读取本地小区自提选择数据
    const localLogisticIdArr = window.localStorage.getItem('logisticIdArr')
    if (localLogisticIdArr) {
      const idArr = JSON.parse(localLogisticIdArr)
      selectedArr.villageIdArr = idArr

      selectedArr.village = true // 如果有缓存则勾选小区自提选项
    } else {
      if (route.query.isCommunity) {
        selectedArr.village = true // 如果有缓存则勾选小区自提选项
      }
    }

    // 读取本地快递选择数据
    const localDeliveryFlag = window.localStorage.getItem('deliveryFlag')
    if (localDeliveryFlag) selectedArr.delivery = JSON.parse(localDeliveryFlag)
  }
  setupInit()
</script>

<style lang="scss" scoped>
  .logistics {
    position: relative;
    height: 100vh;
    overflow: auto;
    background: #f8f9fa;
    box-sizing: border-box;
    padding: 0 30px;

    .title {
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      margin: 40px 0 20px 0;
    }

    .content {
      width: 100%;

      .content-item {
        display: flex;
        align-items: center;
        width: 100%;
        height: 152px;
        background: #ffffff;
        border-radius: 20px;
        box-sizing: border-box;
        padding: 0 30px;
        margin-bottom: 20px;

        .left,
        .right {
          display: flex;
          align-items: center;
          height: 100%;

          img {
            display: block;
          }
        }

        .left {
          width: 58px;

          img {
            width: 36px;
          }
        }
      }

      .content-item:nth-of-type(1) {
        .right {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .right-top {
            width: 100%;
            font-size: 30px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #000000;
          }

          .right-bottom {
            display: flex;
            width: 100%;
            justify-content: space-between;
            margin-top: 12px;

            .r-b-left {
              font-size: 26px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
            }

            .r-b-right {
              display: flex;
              align-items: center;
              font-size: 26px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;

              img {
                width: 26px;
                margin-left: 10px;
              }

              .text-hasnot {
                font-size: 26px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
              }

              .text-has {
                font-size: 26px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
              }
            }
          }
        }
      }

      .content-item:nth-of-type(2) {
        .right {
          font-size: 30px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
        }
      }
    }

    .bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;

      .action {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 112px;
        background: #ffffff;

        .action-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          border: none;
          width: 630px;
          height: 90px;
          background: linear-gradient(90deg, #3ebd33 0%, #9fdf4f 100%);
          box-shadow: 0px 10px 20px 0px rgba(105, 194, 97, 0.27);
          border-radius: 45px;
          font-size: 30px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
      }

      .toolman {
        display: block;
        width: 100%;
        height: 68px;
        background: #ffffff;
      }
    }
  }
</style>
